import { PageContainer } from "@ant-design/pro-components";
import { Steps, Form, message, Spin } from "antd";
import { connect, history } from "umi";
import { namespace } from "./configFile";
import { useEffect, useState } from "react";
import BaseInfo from "./components/BaseInfo";
import Setting from "./components/setting";
import Pay from "./components/pay";
import styles from "./styles.less";
import { useParams } from "react-router-dom";
import Https from "@/utils/Https";

const Page = (props) => {
  const { dispatch } = props;
  const [form] = Form.useForm();
  const params = useParams();
  const { num } = params;
  const [current, setCurrent] = useState();
  const [baseInfo, setBaseInfo] = useState({});
  const [settingInfo, setSettingInfo] = useState({});
  const [saveLoading, setSaveLoading] = useState(false);
  const [formInfo, setFormInfo] = useState({});
  //获取详情信息
  const getDetails = async (id) => {
    let res = await Https.post("/course/infoDetail", { id }, true);
    if (res.code == 200 && res.data) {
      setFormInfo(res.data);
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
      callback: (res) => {
        form.setFieldsValue(res);
      },
    });
    if (params.id > 0) {
      getDetails(params.id);
    }
  }, []);

  useEffect(() => {
    if (num) {
      let newNum = Number(num) - 1;
      setCurrent(newNum);
    } else {
      setCurrent(0);
    }
  }, [num]);

  const submitForm = async (step, request) => {
    if (step === 0) {
      setBaseInfo(request);
      setCurrent(step + 1);
    } else if (step === 1) {
      setSettingInfo(request);
      setCurrent(step + 1);
    } else {
      setSaveLoading(true);
      let res;
      if (params.id) {
        let obj = {
          id: params.id,
          ...baseInfo,
          ...settingInfo,
          ...request,
        };
        res = await Https.post("/course/updateInfo", obj, true);
      } else {
        let obj = {
          courseType: params.courseType,
          ...baseInfo,
          ...settingInfo,
          ...request,
        };
        res = await Https.post("/course/addInfo", obj, true);
      }
      setSaveLoading(false);
      if (res.code === 200) {
        message.success("保存成功");
        history.push("/course/info", { courseType: params.courseType });
      } else {
        message.error(res.msg);
      }
    }
  };
  const items = [
    {
      title: "课程基本信息",
    },
    {
      title: "完善课程信息",
    },
    {
      title: "支付方式设置",
    },
  ];
  return (
    <PageContainer
      title={`${params.id ? "编辑" : "新建"}${
        params.courseType == "1"
          ? "私教课"
          : params.courseType == "2"
          ? "团课"
          : "班课"
      } `}
      onBack={() => {
        history.push("/course/info", { courseType: params.courseType });
      }}
    >
      <Spin spinning={saveLoading}>
        <div className={styles.setting}>
          {!num && (
            <Steps
              style={{ marginBottom: "50px" }}
              items={items}
              current={current}
            ></Steps>
          )}
          <div style={{ display: current == 0 ? "block" : "none" }}>
            <BaseInfo
              info={formInfo}
              isFooter={current == 0}
              submit={(step, reques) => submitForm(step, reques)}
            />
          </div>
          <div style={{ display: current == 1 ? "block" : "none" }}>
            <Setting
              prev={() => {
                setCurrent(current - 1);
              }}
              isFooter={current == 1}
              info={formInfo}
              submit={(step, request) => submitForm(step, request)}
            />
          </div>
          <div style={{ display: current == 2 ? "block" : "none" }}>
            <Pay
              saveLoading={saveLoading}
              prev={() => {
                setCurrent(current - 1);
              }}
              isFooter={current == 2}
              info={formInfo}
              submit={(step, reques) => submitForm(step, reques)}
            />
          </div>
        </div>
      </Spin>
    </PageContainer>
  );
};

export default connect((state) => {
  return {
    ...state[namespace],
    submitLoading: state.loading.effects[`${namespace}/submitItem`],
  };
})(Page);
